<template>
  <div class="home">
    <h1 class="title">巢湖学院查询系统</h1>
    <div class="main">
      <ul class="main-list">
        <li class="main-item"><router-link to="/login-card">学生卡</router-link></li>
        <li class="main-item"><router-link to="/login-class">课代表</router-link></li>
        <li class="main-item"><router-link to="/service-common">图书馆</router-link></li>
        <li class="main-item"><router-link to="/card">请期待</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/font/font.css"
  .home
    position relative
    width 100%
    height 1200px
    background url("../../assets/img/bg.jpg") no-repeat
    background-size 100% 100%
    font-family 'JLH'
    .title
      padding-top 43px
      text-align center
      font-family 'JLH'
      font-size 88px
      color #fff
    .main
      /*position absolute*/
      width 100%
      height 0
      padding-bottom 1000px
      background url("../../assets/img/border-shade.png") no-repeat
      background-size 100% 100%
      .main-list
        display flex
        position relative
        padding 0px 150px
        top 320px
        bottom 393px
        text-align center
        .main-item
          flex 1
          width 218px
          height 224px
          line-height 224px
          margin-right 30px
          font-size 50px
          color rgb(28,100,149)
          -webkit-text-fill-color rgb(28,100,149)
          -webkit-text-stroke: 2px rgb(28,100,149)
          background url("../../assets/img/circu.png") no-repeat
          background-size 100% 100%
          &.a
            display block
</style>
